<mat-card class="card" [ixUiSearch]="searchableElements.elements.twoFactor">
  <mat-toolbar-row>
    <h3>{{ 'Set Up Two-Factor Authentication' | translate }}</h3>
  </mat-toolbar-row>

  @if (isFormLoading() || isDataLoading()) {
    <mat-progress-bar mode="indeterminate"></mat-progress-bar>
  }

  <mat-card-actions>
    <div class="status-content">
      @if (isDataLoading()) {
        <ngx-skeleton-loader class="skeleton-loader"></ngx-skeleton-loader>
      } @else {
        <ix-warning
          [message]="global2FaMsg"
          [color]="!globalTwoFactorEnabled || !userTwoFactorAuthConfigured ? 'orange' : 'green'"
        ></ix-warning>
      }
      @if (globalTwoFactorEnabled && !userTwoFactorAuthConfigured) {
        <p>
          {{ 'Two-Factor Authentication has been enabled on this system. You are required to setup your 2FA authentication. You will not be able to proceed without setting up 2FA for your account. Make sure to scan the QR code with your authenticator app in the end before logging out of the system or navigating away. Otherwise, you will be locked out of the system and will be unable to login after logging out.' | translate }}
        </p>
      }
      <button
        mat-button
        color="primary"
        type="button"
        ixTest="renew-secret"
        [disabled]="isFormLoading()"
        [ixUiSearch]="searchableElements.elements.configure2FaSecret"
        (click)="renewSecretOrEnable2Fa()"
      >
        {{ userTwoFactorAuthConfigured ? ('Renew 2FA Secret' | translate) : ('Configure 2FA Secret' | translate) }}
      </button>
    </div>
  </mat-card-actions>

  @if (userTwoFactorAuthConfigured && (authService.userTwoFactorConfig$ | async); as qrInfo) {
    <mat-card-actions>
      <ix-qr-viewer
        [qrInfo]="qrInfo?.provisioning_uri"
        [showWarning]="globalTwoFactorEnabled && showQrCodeWarning"
      ></ix-qr-viewer>
    </mat-card-actions>

    @if (getProvisioningUriSecret(qrInfo?.provisioning_uri); as secret) {
      <mat-card-actions class="secret-actions">
        <p>
          {{ 'If you can\'t use QR code, use this text code instead' | translate }}:
        </p>

        <div class="secret">
          <p>
            {{ secret }}
          </p>

          <ix-copy-button [text]="secret"></ix-copy-button>
        </div>
      </mat-card-actions>
    }
  }
</mat-card>
